import React from 'react'
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'

import Login from '../views/Login'

import Cinema from '../views/Cinema'
import Center from '../views/Center'
import NotFound from '../views/NotFound'

import Film from '../views/Films'
import NowPlaying from '../views/Films/NowPlaying'
import ComingSoon from '../views/Films/ComingSoon'
import FilmDetail from '../views/Films/Detail'

import Auth from './Auth'

const index = (props) => {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path='/login'
          element={<Login />}
        />

        <Route
          path='/film'
          element={<Film />}
        >
          <Route
            path='nowPlaying'
            element={<NowPlaying />}
          />
          <Route
            path='comingSoon'
            Component={ComingSoon}
          />
          {/* 动态路由 */}
          <Route
            path='detail/:id'
            Component={FilmDetail}
          />
          {/* 重定向 Navigate */}
          <Route
            path=''
            element={<Navigate to='/film/nowPlaying' />}
          />
        </Route>
        <Route
          path='/cinema'
          Component={Cinema}
        />
        <Route
          path='/center'
          element={
            <Auth>
              <Center />
            </Auth>
          }
        />

        {/* 重定向 Navigate */}
        <Route
          path='/'
          element={<Navigate to='/film' />}
        />
        {/* 404 */}
        <Route
          path='*'
          Component={NotFound}
        />
      </Routes>
      {props.children}
    </BrowserRouter>
  )
}

export default index
